<template>
	<div class="course-graph-page">
		<div class="page-header">
			<div class="page-header-title">
				<span class="back-overall" @click="goToOverAllPage">
					<el-icon><HomeFilled /></el-icon>
				</span>
				<div class="course-info">
					<span class="course-name" :title="courseInfo?.subjectName || '未知课程'">{{
						courseInfo?.subjectName || '未知课程'
					}}</span>
					<span class="course-teacher" :title="courseInfo?.teacherName || '未知老师'">{{
						courseInfo?.teacherName || '未知老师'
					}}</span>
					<span
						class="course-teaching-class"
						:title="courseInfo?.teachingClassName || '未知班级'"
						>{{ courseInfo?.teachingClassName || '未知班级' }}</span
					>
					<span class="course-term" :title="courseInfo?.termName || '未知学期'">{{
						courseInfo?.termName || '未知学期'
					}}</span>
				</div>
			</div>
			<div class="page-header-menu-list">
				<span
					class="page-header-menu-item"
					:class="{ active: activeMenu === 'CourseTeachingGraph' }"
					@click="gotoCourseTeachingGraphPage"
					>教学图谱</span
				>
				<span
					class="page-header-menu-item"
					:class="{ active: activeMenu === 'CourseKnowledgeGraph' }"
					@click="gotoCourseKnowledgeGraphPage"
					>知识图谱</span
				>
			</div>
			<div class="other-content"></div>
		</div>
		<div class="page-content">
			<router-view
				:course-code="route.query.courseCode"
				:course-name="courseInfo?.subjectName || ''"
			></router-view>
		</div>
	</div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { HomeFilled } from '@element-plus/icons-vue';
import { getErrorMessage, getCourseProjectPage4AICEAPI } from '@/api/index';
import type { CourseProjectPage4AICEListItemType } from './CourseGraph.type';

const route = useRoute();
const activeMenu = ref(route.name);
onMounted(() => {
	if (route.query.courseCode) {
		getCourseProjectPage4AICE();
	}
});

// 获取课程信息
const courseInfo = ref<CourseProjectPage4AICEListItemType | null>(null);
const getCourseProjectPage4AICE = async () => {
	try {
		const data = await getCourseProjectPage4AICEAPI(route.query.courseCode as string);
		courseInfo.value = data.list?.[0] || null;
	} catch (err) {
		console.error(getErrorMessage(err));
	}
};

// 去课程教学图谱页面
const gotoCourseTeachingGraphPage = () => {
	activeMenu.value = 'CourseTeachingGraph';
	router.push({
		name: 'CourseTeachingGraph',
		query: {
			courseCode: route.query.courseCode
		}
	});
};

// 去课程知识图谱页面
const gotoCourseKnowledgeGraphPage = () => {
	activeMenu.value = 'CourseKnowledgeGraph';
	router.push({
		name: 'CourseKnowledgeGraph',
		query: {
			courseCode: route.query.courseCode
		}
	});
};

// 返回教学图谱全景
const router = useRouter();
const goToOverAllPage = () => {
	router.push({
		name: 'OverAll'
	});
};
</script>
<style scoped lang="scss">
.course-graph-page {
	height: 100%;
}

.page-header {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 7.2rem;
	padding-left: 3rem;
	padding-right: 3rem;
	background: url('@/assets/images/header-bg.png') no-repeat center top/100% 100%;

	.page-header-title {
		display: flex;
		align-items: center;
		width: 42%;
		white-space: nowrap;
		color: #fff;

		.back-overall {
			display: block;
			font-size: $font-size-large-4;
			line-height: 0;
			padding-right: 1rem;
			cursor: pointer;

			&:hover {
				color: $bg-block-color-brand;
			}
		}

		.course-info {
			display: flex;
			align-items: center;
			flex: 1;
			min-width: 0;

			.course-name {
				font-size: $font-size-large-3;
				padding-right: 1.4rem;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			.course-teacher,
			.course-teaching-class,
			.course-term {
				position: relative;
				padding-left: 1.4rem;
				padding-right: 1.4rem;
				font-size: $font-size-base;
				overflow: hidden;
				text-overflow: ellipsis;

				&::before {
					display: block;
					content: '';
					position: absolute;
					top: 50%;
					left: 0;
					width: 1px;
					height: $font-size-base;
					background-color: #fff;
					transform: translateY(-50%);
				}
			}

			.course-name {
				max-width: 45%;
			}

			.course-teacher {
				max-width: 20%;
			}

			.course-teaching-class {
				max-width: 20%;
			}

			.course-term {
				max-width: 15%;
			}
		}
	}

	.page-header-menu-list {
		position: absolute;
		top: 0;
		left: 50%;
		display: flex;
		align-items: center;
		height: 100%;
		transform: translateX(-50%);

		.page-header-menu-item {
			display: flex;
			align-items: center;
			height: 100%;
			padding: 1rem 2rem;
			font-size: $font-size-large-1;
			color: #fff;
			cursor: pointer;

			&:hover {
				background-color: rgba(color.adjust($color-brand, $lightness: -30%), 0.5);
			}
		}

		.page-header-menu-item.active {
			color: #fff;
			background-color: rgba(color.adjust($color-brand, $lightness: -30%), 0.5);
		}
	}

	.other-content {
		display: flex;
		align-items: center;
	}
}

.page-content {
	height: calc(100% - 7.2rem);
}
</style>
